<template>
  <div class="show-room"></div>
</template>

<script>
import { getToken } from "@/utils/auth";
import api from "../../static/api";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      basicDraw: null,
      model: null
    };
  },
  asyncData({ $api }) {},
  computed: {},
  watch: {},
  created() {
    if (process.browser) {
      let {
        BasicDraw,
        ModelShowroom,
        PanoramaShowroom,
        BigImageShow, // 大图类
      } = require("../../utils/main.js");

      // 显示大图 new BigImageShow().showBigImg(大图id)

      let basicDraw = new BasicDraw(); // 创建基础渲染类
      basicDraw.start(); // 开始渲染

      let id = this.$route.query.data_id,
        type =
          this.$route.query.type == "threeModle"
            ? ModelShowroom
            : PanoramaShowroom;

      let model = new type(id, false, {
        // 创建3D模型展厅并渲染，参数：展厅ID、是否调试、基础请求配置
        baseUrl: api.apiOther+'/',
        bigImageUrl: api.apiMap,
        ak: getToken() ? getToken() : '',
      });
      this.closeBtn(basicDraw,model)
    }
  },
  mounted() {},
  methods: {
    closeBtn(basicDraw, model) {
      let closeBtn = document.createElement('div')
      closeBtn.appendChild(document.createTextNode('关闭'))
      document.body.appendChild(closeBtn)
      closeBtn.className = 'show-room-close-btn';
      closeBtn.addEventListener('click', (e) => {
        model?.dispose()
        basicDraw?.dispose()
        e.stopPropagation()
        this.$router.go(-1)
        document.body.removeChild(closeBtn)
      })
    }
  },
};
</script>

<style lang="less">
.show-room-close-btn {
  position: absolute;
  right: 0.5vw;
  top: 2vh;
  border: 0.2vw solid white;
  font-size: 1.2vw;
  padding: 0.25vw 1vw;
  border-radius: 2vw;
  cursor: pointer;
  color: white;
  z-index: 1001;
}
</style>
